<template>
  <view class="bg-color-white">
    <view class="tn-margin-bottom-xl">
      <view
        class="tn-flex tn-flex-row-between tn-padding tn-strip-bottom-min"
        style="background-color: #f1f5fb"
      >
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg"> 一、常见问题 </view>
        </view>
      </view>
      <view
        class="tn-strip-bottom-min tn-padding tn-margin-top-xs"
        v-for="(item, index) in homeList"
        :key="index"
      >
        <view
          class="tn-flex tn-flex-row-between"
          style="width: 100%; align-items: center"
        >
          <view class="justify-content-item">
            <view class="tn-text-df font-size-16">
              {{ item.title }}
            </view>
          </view>
          <!-- <view class="justify-content-item tn-text-lg">
            <TnIcon name="right" />
          </view> -->
        </view>
        <view style="margin-top: 15px" class="font-size-14" -if="item.down">
          {{ item.name }}
          <view class="mt-10">
            <image
              @click="handleImgClick(item.imgList, imgind)"
              v-for="(img, imgind) in item.imgList"
              :src="img"
              mode=""
              style="object-fit: contain; height: 653rpx; width: 300rpx"
              :key="imgind"
            ></image>
            <!-- <image src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648118569596-assets/web-upload/4a310720-62d8-46db-9605-22bbf55e5d95.jpeg" mode=""></image>  -->
            <!-- <image src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1648118569596-assets/web-upload/4a310720-62d8-46db-9605-22bbf55e5d95.jpeg" mode=""></image>  -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const show1 = ref(false)
const homeList = ref([])

onLoad((option) => {
  console.log(option, this)
  const title = option.title
  const name = option.name
  const imgList = option.imgList
  init(title, name, imgList)
})
// 跳转
function tn(e) {
  uni.navigateTo({
    url: e,
  })
}
function init(title, name, imgList) {
  homeList.value = [{title, name, imgList:[imgList]}]
  console.log(homeList.value);
}
function toDetail(item) {
  // ?title=${item.title}&name=${item.name}&imgList=${item.imgList}
  tnNavPage(`/home-page/setting/settingDetail`)
}
function handleImgClick(imgList, index) {
  console.log(imgList, index, [imgList[index]])
  // 预览图片
  uni.previewImage({
    urls: [imgList[index]],
    current: 0,
  })
}
function handleDown(item, index, type) {
  let down = ''
  if (item.down) {
    down = false
  } else {
    down = true
  }
  if (type == 'home') {
    this.$set(this.homeList, index, {
      ...item,
      down: down,
    })
  } else {
    this.$set(this.secondList, index, {
      ...item,
      down: down,
    })
  }
}
// 预览作者图片
function previewQRCodeImage() {
  uni.previewImage({
    urls: ['https://tnuiimage.tnkjapp.com/advertise/qrcode.jpg'],
  })
}

// 弹出模态框
function showModal(event) {
  this.openModal()
}
// 打开模态框
function openModal() {
  this.show1 = true
}
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}

/* 间隔线 start*/
.tn-strip-bottom-min {
  width: 100%;
  border-bottom: 1rpx solid #f8f9fb;
}

.tn-strip-top {
  width: 100%;
  // border-top: 20rpx solid rgba(241, 241, 241, 0.8);
}

/* 间隔线 end*/

/* 用户头像 start */
.user-image {
  width: 90rpx;
  height: 90rpx;
  position: relative;
}

.user-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ffffff;
}

/* 底部悬浮按钮 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  height: calc(140rpx + constant(safe-area-inset-bottom));
}

.tn-footerfixed {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
  bottom: 0;
  width: 100%;
  transition: all 0.25s ease-out;
  z-index: 100;
}
.step-list {
  margin-bottom: 12rpx;
  image {
    width: 200rpx;
    height: 240rpx;
    margin-right: 12rpx;
    border-radius: 8rpx;
  }
}
</style>
